<template>
	<view class="withdrawDetail">
		<view class="detailList">

			<view class="item" v-for="(item,index) in draw_list" :key="index">
				<view class="content" v-if="item.draw_type == '10'">
					<image class="avatar" mode="aspectFill" :src="item.wechat_avatar"></image>
					<view class="left">
						<view class="nickname">{{item.wechat_nickname}}</view>
						<view class="time">{{item.apply_time}}</view>
					</view>
					<view class="right">
						<view class="amount">￥{{item.money}}</view>
						<view class="status success" v-if="item.check_result == 'Y'">已到账</view>
						<view class="status review" v-else-if="item.is_check == 'N'">审核中</view>
						<view class="status error" v-else>已驳回</view>
					</view>
				</view>
				<view class="content" v-else>
					<image class="avatar" mode="aspectFill" src="/static/alipay.png"></image>
					<view class="left">
						<view class="alipay">
							<text>姓名：{{item.alipay_truename}}</text>
							<text>账户：{{item.alipay_account}}</text>
						</view>
						<view class="time">{{item.apply_time}}</view>
					</view>
					<view class="right">
						<view class="amount">￥{{item.money}}</view>
						<view class="status success">已到账</view>
					</view>
				</view>
				<view class="reason" v-if="item.check_result=='N'">驳回时间：{{item.check_time}}，驳回原因:{{item.remark}}</view>
			</view>
		</view>
		
		<view class="noContent" v-if="draw_list.length == 0">
			<image class="noContentImage" mode="widthFix" src="/static/noLive.png"></image>
		</view>

	</view>
</template>

<script>
	var util = require('../../common/util.js');
	export default {
		data() {
			return {
				p: 1,
				is_loading: false,
				is_more: true,
				draw_list: []
			}
		},
		onLoad() {
			this.loadData();
		},
		onReachBottom() {
			if (!this.is_loading) {
				if (!this.is_more) {
					util.toast("没有更多数据了");
					return false;
				}
				this.p = parseInt(this.p) + 1;
				this.loadData();
			}
		},
		methods: {
			loadData: function() {
				// 加载数据
				var that = this;
				this.is_loading = true;
				let data = {
					'p': this.p
				};
				util.requestPost("api.php/user/drawList", data, function(res) {
					let is_more = false;
					if (res.data.draw_list.length >= 15) {
						is_more = true;
					}
					if (that.p == 1) {
						that.draw_list = res.data.draw_list;
					} else {
						that.draw_list = that.draw_list.concat(res.data.draw_list);
					}

					that.is_loading = false;
					that.is_more = is_more;
				});
			}
		}
	}
</script>

<style scoped>
	.withdrawDetail {
		min-height: 100%;
		background-color: var(--bgColor);
	}

	.detailList {
		padding: 0 20rpx;
		background-color: #ffffff;
	}

	.detailList .item {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eeeeee;
	}

	.detailList .item:last-of-type {
		border-bottom: none;
	}

	.detailList .item .content {
		display: flex;
		align-items: center;
	}

	.detailList .item .left {
		flex: 1;
	}

	.detailList .item .right {
		text-align: right;
		height: 100%;
	}

	.detailList .item .avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 40rpx;
		margin-right: 20rpx;
	}

	.reason {
		font-size: 24rpx;
		color: var(--primaryColor);
		margin-top: 20rpx;
	}

	.nickname {
		font-size: 28rpx;
	}
	.alipay {
		font-size: 26rpx;
		color: #333;
	}
	.alipay text:first-of-type {
		margin-right: 20rpx;
	}
	.time {
		font-size: 24rpx;
		margin-top: 12rpx;
		color: #666666;
	}

	.zfName {
		font-size: 28rpx;
	}

	.account {
		font-size: 24rpx;
		margin-top: 12rpx;
	}

	.amount {
		font-size: 32rpx;
	}

	.status {
		font-size: 24rpx;
		margin-top: 12rpx;
	}

	.status.success {
		color: #18b566;
	}

	.status.error {
		color: var(--primaryColor);
	}

	.status.review {
		color: #f29100;
	}
</style>
